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Design Web 2 Style. 

Posted by Sigit eko in Belajar Photoshop , Photoshop Menengah on 06 20th, 2008 I 13 responses 
Ada banyak macam cara bikin web 2 style ini.. saya coba bikin cara yang sederhana yaa.. 
Pokoknya maknyuss pemirsa.. hehehe. . . 
pertama buat dokumen baru : 



Name: Untitled-1 



Preset: Custom 




Color Mode: RGB Color » 8 bit 
Background Contents: White 

5? Advanced 



s 



Bikin shape dengan rounded marque tool 
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ft UrWled-1 @ 100% (RGB/8) 



r7=n 





^ - 



f 



Klik kanan kotaknya lalu klik make selection, abis gitu klik New layer .. 



Define Custom Shape... 

Blending Options... 

Make Section... 
Fill Path... 
Stroke Path... 

Rasterize Layer 
Rasterize Vector Mask 

Free Transform Path 
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LI. 



4 - 



| Paths | Channe ls | Layers x [_ 

Normal w Opacity: ic 




Warnain pake item., pake Brush aja.. 

m 

Li, 



to] 
[fit 

I 




Paths | Channels | Lasers - 



Norma! 



■r Opacity: ! 100% ; ► 



Unify: %% E Propagate Frame 1 



Lock: □ ^ * ft F»: | 100% |T] 







Layer 1 


m 




Background Q 



klik kanan layer 1 , klik blending Option., terus contreng gradient overlay setting seperti dibawh : 
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3rzl ent: 



Style: Urrar 



'v ) J , Aiiqn w 



^ [Tj] Reverse 
ith Layer 



Gradient Editor 



(2) 



Presets 



rr 



[ OK 



Name: 



Custom 



Cancel 



Load... 



Save... 



New 



Gradient Type: Solid 



Smoothness: 100 
T43434 



^00000 j 




Jangan dulu di OK in. . . setting Stroke nya juga seperti dibawah 

Blending Options: Default 



□ Drop Shadow 

□ Inner Shadow 

□ Outer Gbw 
I i Inner Gbw 

□ Bevel and Emboss 

□ Contour 

□ Texture 

□ Satin 

□ Color Overlay 
[V] Gradient Overlay 

□ Pattern Overlay 



Q Stroke 



Size: 



Position: Outside " 



0 
t 



Blend Mode: N orma | 
Opacity: r— 



Q 



r fffVPe: Color 
Color: 



100 



363636 



Tetep jangan di OK in. . . Lalu Settung eh., setting inner glow nya, tetepp.. seperti dibawah 



Styles 



Blending Options: Default 



| | Drop Shadow 

i | Inner Shadow 

□ Outer Gb w 



EJ Inner Glow 



i J Bevel and Emboss 

□ Contour 

□ Texture 

□ Satin 

□ Color Overlay 
\J\ Gradient Overlay 

□ Pattern Overlay 
0 Stroke 



r 



Structure 

Blend Mode: 

Opadty: Q- 

Noi9e:Q— 



Elements 



Technique: , 

Source: Center 9 Edg 
Choke: Q — 



Quality 



Contour: 



Range: 



|^^*J □AnB-alia^ed^ 

' IJ 60 



Nah boleh deh tuh.. di OK in .. 
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Terus Bikin kotak kecil di dalemnya pake rounded rectangle tool .. cara bikin nya seperti, bikin kotak yang gede yaa. . . masa 
lupa sih. . . bisa kan yaa.. 



0 12 14 16 18 110 |12 
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100% ®| Doc: 468,8^657,7K r! < 






Paths | Channeli | Layers ■ 


Normal ▼ 


Opacity: 100% ► 


Unify: E Propagate Frame 


Lock: □ ^ 4» A 


F*| 100% | ► 




Layer 2 



Layer 1 
Effects 



fx - 



§> Inner Glow 



9> Gradient Overlay 



9 Stroke 



lalu klik new layer lagi , terus klik Quick layer mask seperti gambar di atas. 
Tarik gradient dari atas ke bawah.. setting seperti gambar di bawah yaa.. 
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J 



ft 

DM 



-I 

j 



Mode; Normal 

| Untitled-Wi 1 
0 |2^> 



Opacity! j 100% j > | 



) 100% (Layer 2, Layer Mask/8) 



SL1] 



1 1 1 1 ■ ■ 1 1 ■ ■ 1 1 1 ■ 1 1 1 ■ ■ 1 ■ 1 1 1 1 ■ I 1 ■ ■ ■ 1 ■ ■ 1 1 I ■ 1 1 ■ 1 ■ ■ ■ : I 1 1 ■ 1 1 ■ ■ ■ ■ I ■ 1 1 1 1 1 1 1 ■ 



tarik gradient dari 
atas ke bawah 
kayak gini 





Paths | Channels | Layers x [ 
, Opacity: : 

Unify: % % 0 Propagati 



100% <> i 



Doc: 468,SK/813,9K 



► « 



Lock: □ J + Q 




8* Inner Gbw 

® Gradient Overlay 

9 Stroke 



Background 



I 

Jadi deh. . . kasih tulisan ditengah nya.. tulisan apa aja. . . mau nama kamu, nenek kamu, ibu kamu, terserah deh pokoknya. 
hehehe.. jadinya kayak gini nih : 



! ILMUPH0TOSHOP j 



keren kan boss. 



kalo mau berwarna . . . Tinggal klik kanan layer 1 , klik blending option., klik gradient overlay. 

- — : i - i —> 



z rr- = 



Opacity: :: 



lify: ^ %% GZ1 Propagate Frame 1 



□ d «$» A 



Fill: 



ILMUPHOTOSHOP 




9 Effects 



9 Inner Glow 



® Gradient Overlay 



Stroke 



Background 



a 





Styles 






Blending Options: Default 






~\ Drop Shadow 






[~] Inner Shadow 






0 Outer Glow 






Vj Inner Glow 






0 Bevel and Emboss 






[~j Contour 






[_J Texture 






□ Satin / 






□ Color Overlay 






Q Gradient Overlay 






□ Pattern Overlay 






H Stroke 











warnain deh tuh.. saya coba kasih warna ijo yaa.. 
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J Inner Shadow 
i Outer Glow 
7] Inner Gbw 
J Bevel and Em 

□ Contour 

□ Texture 
I] Satin 
Z) Color Overlap 



Gradient Ov 



J Pattern OverlJ 
/; Stroke 



Style: y near 



▼ h7] Align with Layer 



Li 



Gradient Editor 




Presets 



V 



OK 



Cancel 



Load. 



Save... 



HIJAU MUDA 

Name 




Ok.. Ok in., 
hasilnya gini nih.. 



ILMUPHOTOSHOP 



Selamat mencoba. . . 

13 Responses to "Design Web 2 Style." 

1. arissuryana says: 

June 24, 2008 at 7: 14 am 

good. . .good. . .good. . . 

2. Mades Rosanda says: 
June 24. 2008 at 5:25 pm 

bagus mas! ! tapi tolong lebih banyak lagi ya tutorialnya! ! !he he he 

3. andre says: 

June 26. 2008 at 11:39 pm 

kali ini lu ga kreatif bro ! ! 
jelek!! 

biasa ajah.... 

4. Sigit eko says: 

July 1.2008 at 4:46 am 

maaf yaa mas andre.. 



5. ginna says: 

July 1, 2008 at 9:08 am 
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wah Mas Sigit jangan patah semangat, buat pemula yang kuaatrroo berat kaya akyu, tips-tipsnya membantu sekali.. 
ayo buat lagi ya.. terima kasih banyak sudah mau berbagi 

6. denny says: 

July 14, 2008 at 9:20 am 

mas,.,. 

klu bkin web pake potoshop gmn she era' a.,, 
biz ke email saya adja ya,.,. 
pnrb_deny@yahoo.com 
tararengQyu 

7. flug,. says: 

July 14, 2008 at 9:25 am 

huy bung andre,.., 
klu anda mang kreatip 
tunjukin dung hasil karya anda 
jngn cma bsa ngatain duaex,,.,.,. 

8. riyanto says: 

July 16,2008 at 6:10 am 

Gimana dong design wallpaper pake photoshop 7? Aq masih bingung neeh.. 

9. desman says: 

October 15, 2008 at 5:14 am 

apapun ceritanya mau biasa aja kek hasilnya tetapi yg terpenting. . .tutorial ini sangat berharga terlebih lagi gw sebagai 
pemula.... 

keep posting mas 

10. cuex says: 

October 20, 2008 at 1:29 pm 

mas niy yang dipakai dalam contoh photoshop Cs 3 ya ko tampilannya beda dengan photoshop yang Ver.6 heheheheh 
sorry namanya juga baru belajar dan palainya juga photoshop lama O 

11. 4me says: 

February 11, 2009 at 7:57 am 

mas,,, mau request donk.. 

bikin tutor design template ala web 2.0, haduh aku newbie banget neh. . . *penasaran modeON 
thxb4 

12. ruddy says: 

February 20, 2009 at 6:32 pm 

wah mas., tutorialnya cuantikkk. . . and pis hargai karya orang.. wong gratisan aja.. keep terus bro. . . 

13. shooGiE says: 

April 11, 2009 at 4: 17 am 

Mas Sigit bagus mas tutorialnya, itung2 belajar buat website kan butuh tutorial yang kayak ginian. Kalo bisa sih 
tambahin lagi yg banyak mas tutorial yg kayak gini cos masih katroxxx banget nih pakai photoshop. 

Maju terus dan buat tutorial lagi yang banyak. . . 
Leave a Reply 

Name (required) 

Mail (will not be published) (required) 
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